<template>

  <el-container  style="margin: 0;background: #EBEEF5;">
    <el-header style="background-color:#00050a">
      <el-row style="background-color:#00050a;height: 60px">

        <el-col :span="4">
          <i class="el-icon-coordinate" style="float: right;"><strong style="margin-right: 10px;margin-bottom: 5px;font-size: 25px;text-align: center;color: #fff" >GameStore</strong></i>
        </el-col>
        <el-col :span="8">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                   background-color="#00050a"
                   text-color="#fff"
                   active-text-color="#ffd04b">
            <el-menu-item index="1" ><a >主页</a></el-menu-item>
            <el-menu-item index="5" >全部游戏</el-menu-item>
            <el-menu-item index="3" >登录</el-menu-item>
            <el-menu-item index="4" >注册</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>

<!--      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >-->
<!--        <div style="text-align: center"><strong style="font-size: 20px;text-align: center" >GameStore</strong></div>-->
<!--        <el-menu-item index="1" ><a >主页</a></el-menu-item>-->
<!--        <el-menu-item index="5" >全部游戏</el-menu-item>-->
<!--        <el-menu-item index="3" >登录</el-menu-item>-->
<!--        <el-menu-item index="4" >注册</el-menu-item>-->
<!--      </el-menu>-->

    </el-header>
    <el-main>

      <router-view></router-view>
    </el-main>
    <el-footer height="60px" style="text-align: center;background-color:#00050a;height:40px;width: 100%; bottom: 0;">
      <a href="/home" style="color: #FFFFFF;margin-top: 5px;height:60px;  text-decoration-line: none">@GameStore<br></a>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name:"Index",
  data() {
    return {

      activeIndex: '/device_new/',

    currentDate: new Date()
    };
  },
// created(){
//     if(this.$store.state.userId === -1){
//       this.dialogVisible=true
//     }else{
//       this.dialogVisible=false
//     }
// },
  mounted() {
    this.activeIndex = this.$route.path
  },
  methods: {
    search(){
      this.$router.push('/allGames');
    },

    handleSelect(key, keyPath) {
      console.log(key);
      if(key == '1'){
        this.$router.push({path: '/home'});
      }
      if(key == '3'){
        this.$router.push({path: '/login'});
      }
      if(key == '4'){
        this.$router.push({path: '/register'});
      }
      if(key == '5'){
        this.$router.push({path: '/allGames'});
      }


    },

  }
};
</script>

<style>
.el-icon-coordinate{
  font-size:49px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

</style>